import React , {Component} from 'react';
import { connect } from 'react-redux';
import {
    HeaderWrap
} from './style';
import { CSSTransition } from 'react-transition-group';
import logo from '../../statics/00.png';
import { createAction } from './store/index';
import { Link } from 'react-router-dom';
 

class Header extends Component {
   
    getListArea = () => {
        const { focused ,list,muenShow,handleOnMouseEenter,handleOnMouseLeave,totlePage,page,handleChangePage}  = this.props;
        const newList = list.toJS();
        const pageList = [];
        for(let i = (page-1)*10;i<page*10;i++){
                newList[i] && pageList.push(<span key={newList[i]} className="search-item">{newList[i]}</span>)
        }

        if(focused || muenShow){
            return (
                <div 
                onMouseEnter={()=>{handleOnMouseEenter()}} 
                onMouseLeave={()=>{handleOnMouseLeave()}} 
                className="search-tips">
                    <div className="search-tips-header">
                    <span className="title">热门搜索</span>
                    <span className="another" onClick={()=>{handleChangePage(page,totlePage)}}>换一批</span>
                    </div>
                    <div className="search-tips-content">
                    {pageList}
                    </div>
                 </div>
             )
        }
    }

    render() {
        const { focused ,handleChangeInput ,totlePage}  = this.props;
        return (
            <HeaderWrap>
                <div className="nav">
                  <a href="/" className="LogoLeft">
                    <img className="headerLogo" src={logo} alt="logo"/>
                  </a>
                  <span href="/" className="editRight Headeright">
                  <i className="iconfont">&#xe603;</i>
                    写文章
                  </span>
                  <Link to={"/login"} className="registerRight Headeright">
                    注册
                  </Link>
                  <div className="container">
                    <Link to={'/'}>
                        <span className="menu-text">
                            <i className="iconfont">&#xe634;</i>
                            首页
                        </span>
                    </Link>
                     <span className="downLoadApp">
                        <i className="iconfont">&#xe6d4;</i>
                        下载App
                     </span>
                     <span className="searchInput">
                       <CSSTransition
                       in={focused}
                       timeout={200}
                       classNames="slide"
                       >
                          <input 
                          className={focused ? 'focused': ''}  
                          type="text" placeholder='搜索'
                          onFocus={()=>{handleChangeInput(focused,totlePage)}}
                          onBlur= {()=>{handleChangeInput(focused)}}
                          />
                       </CSSTransition>
                       <CSSTransition
                        in={focused}
                        timeout={200}
                        classNames="slide"
                        >
                       <i className={focused ?'iconfont focused':'iconfont'}>&#xe600;</i>
                       </CSSTransition>
                       {this.getListArea()}
                     </span>
                     <div className="container_right">
                        <span className="Aa">
                         <i className="iconfont">&#xeb4e;</i>
                        </span>
                        <Link to={'/login'}>
                                <span className="loginBtn">
                                   登录
                                </span>
                        </Link>
                        
                     </div>
                  </div>
                </div>
            </HeaderWrap>
        )
    }
}

const mapStateToProps = (state)=>{
   return {
     focused:state.getIn(['header','focused']),
     muenShow:state.getIn(['header','muenShow']),
     list:state.getIn(['header','list']),
     totlePage:state.getIn(['header','totlePage']),
     page:state.getIn(['header','page']),
   }
};
const mapDispathToProps = (dispath) => {
    return {
        handleChangeInput(value,totlePage){
            if(!value && totlePage === 1){
                dispath(createAction.getListArea())
            }
            dispath(createAction.changeInput(value));
        },
        handleOnMouseEenter(){
           dispath(createAction.OnMouseEenter());
        },
        handleOnMouseLeave(){
            dispath(createAction.OnMouseLeave());
        },
        handleChangePage(page,totlePage){
            if(page < totlePage){
                let pages = page+1;
                dispath(createAction.ChangePage(pages));
            }else{
                let pages = 1;
                dispath(createAction.ChangePage(pages));
            }
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispathToProps
)(Header);